import Taro from "@tarojs/taro";
import GpContainer from "@/components/GpContainer";
import GpFontIcon from "@/components/GpFontIcon";
import { useNavigateEventChannel } from "@/hooks/useNavigateEventChannel";
import { Button, Form, FormProps, Input, Text, View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { navigate } from "@/utils/navigation";

export default function Index() {
  const { eventChannel } = useNavigateEventChannel()
  const router = useRouter()
  const wechat = router.params.wechat ? decodeURIComponent(router.params.wechat) : ""
  const handleSubmit: FormProps['onSubmit'] = ({detail: {value}}) => {
    if (!value!.wechat) {
      Taro.showToast({
        title: "请输入微信号",
        icon: "none"
      })
      return
    }
    eventChannel.emit("acceptWechat", value)
    navigate()
  }
  return (
    <GpContainer className="bg-white">
      <View className="flex flex-row items-center box-border pl-[32px] pr-[40px] h-[84px] bg-[#FD9900]/8">
        <GpFontIcon name="icon-zhuyi" color="#FD9900" size={32} className="mr-[8px]" />
        <Text className="text-[28px] leading-[28px] text-[#FD9900] flex-1">
          每月可修改10次，本月您还可以修改10次
        </Text>
        <GpFontIcon name="icon-guanbi" color="#FD9900" size={48} className="ml-[8px]" />
      </View>
      <Form className="box-border px-[32px] flex flex-col mt-[8px]" onSubmit={handleSubmit}>
        <View className="border-b border-solid border-b-[#EEEEEE] py-[40px]">
          <Input name="wechat" placeholder="请输入微信号" className="border-0 outline-0 text-primary text-[32px]" />
        </View>
        <View className="flex flex-col mt-[32px]">
          <Text className="text-third text-[28px] leading-[36px]">
            当前微信号：{wechat || "--"}
          </Text>
          <Text className="text-placeholder text-[24px] leading-[24px] mt-[12px]">
            * 若需修改登录微信，请前往设置-账号与安全中心-账号管理
          </Text>
        </View>
        <Button formType="submit" className="text-center bg-theme h-[80px] leading-[80px] box-border rounded-[64px] mt-[96px]">
          <Text className="text-white text-[32px]">保存</Text>
        </Button>
      </Form>
    </GpContainer>
  )
}
